<template>
	<view class="container">
		<view class="bg-colore"></view>
		<view class="content">
			<topLogo title="旧物回收"></topLogo>
			<view class="home_top">
				<view class="wrap">
					<uni-row>
						<uni-col :span="10">
							<view class="topleft" @click="$public.switchTabTo('/pages/center/index')"
								v-if="$store.state.userInfo.nickName">
								<image src="../../static/sj_sqlocation.png" mode="scaleToFill" class="image"></image>
								请登录
							</view>
							<view class="topleft">
								<image src="../../static/sj_sqlocation.png" mode="scaleToFill" class="image"></image>
								<text v-if="plotName" @click="getPlotList">{{plotName}}</text>
								<text v-else @click="getPlotList">未绑定小区</text>
							</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
			<view class="wrap">
				<view class="tz-div mianfeiling">
					<view class="mf-flex" style="width: 93%;margin: 0 auto;">
						<image src="../../static/sj_jw_img1.png" mode="scaleToFill" class="img1"></image>
						<image src="../../static/sj_jw_imgjt.png" mode="scaleToFill" class="img2"></image>
						<image src="../../static/sj_jw_img2.png" mode="scaleToFill" class="img1"></image>
						<image src="../../static/sj_jw_imgjt.png" mode="scaleToFill" class="img2"></image>
						<image src="../../static/sj_jw_img3.png" mode="scaleToFill" class="img1"></image>
					</view>
					<view class="mf-flex mf-xia">
						<view class="wz-div left">
							扫描机器二维码
						</view>
						<view class="wz-div">
							参与公益答题
						</view>
						<view class="wz-div right">
							机器掉货
						</view>
					</view>
					<view class="btn-div">
						<view class="btncss" @click="lingqu">
							免费领取垃圾袋
						</view>
					</view>

				</view>
			</view>
			<view class="wrap ">
				<view class="cygn-div">
					<jxwTitle title="旧物回收"></jxwTitle>
					<view class="material-column">
						<uni-grid :column="4" :show-border="false" :square="false">
							<uni-grid-item v-for="(item,index) in jiuwuList" :key="index">
								<view class="grid-item-box" @click="$public.gotoMiniProgram(item.json.appid,item.json.appurl)">
									<view class="image-div">
										<image class="image" :src="$public.imgageUrl(item.images)" mode="aspectFit" />
									</view>
									<view class="text">{{item.title}}</view>
								</view>
							</uni-grid-item>
						</uni-grid>
					</view>
					<view class="btn-div">
						<view class="btncss" @click="openNoOpen">
							一键上门回收
						</view>
					</view>
				</view>

			</view>
			<view class="wrap ">
				<view class="material-column yy-div">
					<view class="grid-item-box tg-list" v-for="(item,index) in yuyueList" :key="index" @click="openNoOpen">
						<view class="image-div">
							<image class="image" :src="$public.imgageUrl(item.images)" mode="aspectFit" />
						</view>
						<view class="text">{{item.title}}</view>
					</view>
				</view>
			</view>
			<view class="wrap ">
				<view class="cygn-div">
					<jxwTitle title="今日价格"></jxwTitle>
					<view class="jrjg-div">
						<view class="jrjg-list" v-for="(item,index) in jrjgList" :key="index">
							<image :src="$public.imgageUrl(item.images)" mode="scaleToFill" class="image"></image>
							<view class="title1">
								{{item.title}}价格：<text class="redzi">￥{{item.json.money}}</text>
							</view>
							<view class="title2">
								赠送{{item.json.name}}<text class="redzi">{{item.json.number}}</text>
							</view>
							<view class="title3">
								参加即可赠送
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<uni-popup ref="plotList">
			<view class="sm-div">
				<view class="sm-div-bg ">
					<view class="sm-list" v-for="(item,index) in plotList" :key="index">
						<text>{{item.name}}<text class="huangzi">约{{item.juli}}km</text></text>
						<text @click="bangdingPlot(item)">绑定</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="pipeiFail">
			<view class="pp-div">
				<view class="pp-div-bg ">
					<view class="title">
						提示
					</view>
					<view class="bqwenzi">
						非常抱歉，您的手机号码未录入系统，不能领取！
					</view>
					<view class="huizi">
						如需领取，请联系：
					</view>
					<view class="dianhua">
						13812346785 <image src="../../static/sj_jiuwu_tel.png" mode="scaleToFill" class="dianhuaquan"
							@click="$public.telPhone('13812346785')"></image>
					</view>
					<view class="btn-div">
						<view class="btncss" @click="$refs.pipeiFail.close()">
							知道了
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="pipeiSuccess">
			<view class="pp-div">
				<view class="pp-div-bg ">
					<view class="title">
						提示
					</view>
					<view class="lvzi">
						恭喜你！您的物品已领取成功
					</view>
					<view class="huizi">
						谢谢你的参与！
					</view>
					<view class="juzhong">
						<view class="ewm">
							<image :src="$public.imgageUrl(lqewm)" mode="scaleToFill" class="image"></image>
						</view>
					</view>

					<view class="huizi">
						券码：{{code}}
					</view>
					<view class="bqwenzi">
						请到物业处出示此二维码领取
					</view>
					<view class="btn-div">
						<view class="btncss" @click="$refs.pipeiSuccess.close()">
							知道了
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="pipeiSuccessOther">
			<view class="pp-div">
				<view class="pp-div-bg ">
					<view class="title">
						提示
					</view>
					<view class="bqwenzi">
						非常抱歉，您的家人已领取成功，一户仅限领取一次！
					</view>
					<view class="huizi">
						谢谢你的参与！
					</view>
					<view class="btn-div">
						<view class="btncss" @click="$refs.pipeiSuccessOther.close()">
							知道了
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				plotList: [],
				plotName: '',
				jiuwuList: [],
				yuyueList: [],
				jrjgList: [],
				lqewm: "",
				code: ""
			}
		},
		async onLoad() {
			this.getArticle1();
			this.getArticle2();
			this.getArticle3()
			// this.$refs.pipeiSuccess.open()
		},
		onShow() {
			let that = this
			setTimeout(function() {
				that.plotName = that.$store.state.userInfo.plotName
			}, 1000)
		},
		methods: {
			...mapMutations(['updatePlot']),
			getArticle1() {
				let that = this
				this.$public.htmlPost("/api/getArticle", {
					columnId: 21,
					tj: 0
				}).then((res) => {
					console.log("getArticle1 res", res)
					let data = res.data;
					if (data.code == 0) {
						that.jiuwuList = data.data
						that.jiuwuList.forEach(item => {
							item.json = JSON.parse(item.remark)
						})
					}
				})
			},
			getArticle2() {
				let that = this
				this.$public.htmlPost("/api/getArticle", {
					columnId: 22,
					tj: 0
				}).then((res) => {
					console.log("getArticle2 res", res)
					let data = res.data;
					if (data.code == 0) {

						that.yuyueList = data.data
						that.yuyueList.forEach(item => {
							item.json = JSON.parse(item.remark)
						})
					}
				})
			},
			getArticle3() {
				let that = this
				this.$public.htmlPost("/api/getArticle", {
					columnId: 16,
					tj: 0
				}).then((res) => {
					console.log("getArticle3 res", res)
					let data = res.data;
					if (data.code == 0) {

						that.jrjgList = data.data
						that.jrjgList.forEach(item => {
							item.json = JSON.parse(item.remark)
						})
					}
				})
			},
			change(e) {
				this.current = e.detail.current
			},
			bangdingPlot(item) {
				let that = this
				uni.showModal({
					title: "温馨提示",
					content: `确定绑定小区 ${item.title} ?`,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.$refs.plotList.close()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			getPlotList() {
				let that = this
				this.$public.getLocation()
				let location = uni.getStorageSync('setLocation');
				if (location) {
					this.myLocation = location
				}
				this.$public.htmlPost("/api/getPlotList").then((res) => {
					console.log("getPlotList res", res)
					let data = res.data;
					if (data.code == 0) {
						that.plotList = []
						data.data.forEach(item => {
							let arr = item.bak1.split(",");
							if (item.bak1.indexOf("，") >= 0) {
								arr = item.bak1.split("，");
							}
							if (arr.length > 1) {
								item.lat = arr[0];
								item.lng = arr[1];
								item.juli = that.$public.distance(item.lat, item.lng, that.myLocation.lat, that.myLocation.lng)
							} else {
								item.lat = 27.993864;
								item.lng = 120.699269;
								item.juli = that.$public.distance(item.lat, item.lng, that.myLocation.lat, that.myLocation.lng)
							}
							that.plotList.push(item)
						})
						that.plotList.sort(function(a, b) {
							return a.juli - b.juli
						});

						// that.plotList = data.data
						that.$refs.plotList.open()
					}
				})
			},
			addUserPlot(item) {
				let that = this
				this.$public.htmlPost("/api/addUserPlot", {
					plotId: item.plotId
				}).then((res) => {
					console.log("addUserPlot res", res)
					let data = res.data;
					if (data.code == 0) {
						that.$api.msg(`您已成功绑定 ${item.name} `)
						that.updatePlot({
							plotId: item.plotId,
							plotName: item.name
						})
						that.plotName = item.name
						// console.log("plotName", that.$store.state.userInfo.plotName)
						that.$refs.plotList.close()
					}
				})
			},
			async lingqu() {
				uni.scanCode({
					onlyFromCamera: true
				});
				// if (!this.$public.isLoginUrl())
				// 	return false
				// let res = await this.$public.htmlPost("/api/getItemCollection")
				// console.log("res", res)
				// let that = this
				// if (res.data.code == 0) {
				// 	console.log(123)
				// 	uni.showModal({
				// 		title: "你的手机号码已匹配：",
				// 		content: res.data.data.plotName + res.data.data.room,
				// 		cancelText: "错误申报",
				// 		success: function(res) {
				// 			if (res.confirm) {
				// 				console.log('用户点击确定');
				// 				that.getItemRecords()

				// 			} else if (res.cancel) {
				// 				console.log('用户点击取消');
				// 			}
				// 		}
				// 	})
				// 	// this.$refs.pipeiSuccess.open()
				// } else {
				// 	this.$refs.pipeiFail.open()
				// }
			},
			async getItemRecords() {
				let that = this
				this.$public.htmlPost("/api/getItemRecords").then(res => {
					console.log("res", res)
					if (res.data.code == 0) {
						if (res.data.data.bak1 == 1) {
							uni.showModal({
								title: "温馨提示",
								content: "您本月已领取过",
								showCancel: false,
							})
						} else {
							that.lqewm = res.data.data.ewm
							that.code = res.data.data.bak3
							that.$refs.pipeiSuccess.open()
						}

					}

				})
			},
			openNoOpen() {
				this.$api.msg("本小区暂未开放")
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background: url(#{$imageUrl}/webbg.png) top center no-repeat;
		background-size: 100% auto;

		.wrap {
			padding: $uni-wrap-padding;
		}

		.home_top {
			// background: $uni-wl-blue;
			color: #fff;
			height: 100rpx;
			line-height: 100rpx;
			overflow: hidden;

			.topleft {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #333333;

				.image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}

				.addtext {
					margin: 0 10rpx;
					color: #ffea06;
				}
			}


		}

		.tz-div {
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			background: url(#{$imageUrl}/tzbg.png) top center no-repeat;
			background-size: 100% auto;
			height: 180rpx;

			.tz-left {
				margin-right: 30rpx;

				.image {
					width: 74rpx;
					height: 72rpx;
				}
			}

			.tz-right {
				.tz-title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 10rpx;

					.image {
						width: 32rpx;
						height: 32rpx;
					}
				}

				.tz-abstract {
					font-size: 24rpx;
					color: #666666;
				}
			}
		}

		.mianfeiling {
			height: auto;
			display: block;
			padding: 40rpx 30rpx;

			background: linear-gradient(180deg, #FFF2F2 0%, #FFFFFF 100%);

			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.mf-flex {
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 100%;

				.img1 {
					width: 112rpx;
					height: 112rpx;
				}

				.img2 {
					width: 81rpx;
					height: 15rpx;
				}

				&.mf-xia {
					justify-content: space-between;
					margin-top: 16rpx;
				}

				.wz-div {
					width: 200rpx;
					color: #666666;
					font-size: 28rpx;
					text-align: center;

					&.left {
						text-align: left;
					}

					&.right {
						// text-align: right;
						padding-left: 30rpx;
					}
				}
			}




		}

		.btn-div {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 40rpx;

			.btncss {
				width: 330rpx;
				height: 80rpx;
				background: linear-gradient(135deg, #DF686A 0%, #EE8D56 100%);
				box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(223, 104, 106, 0.25);
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				letter-spacing: 0;
				font-weight: normal;
			}
		}

		.cygn-div {
			background: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-top: 30rpx;
		}

		.app-title {
			margin-bottom: 0;
		}

		.material-column {
			.image-div {
				// width: 116rpx;
				// height: 116rpx;
				// background: #f3f3f3;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin: 40rpx auto 10rpx;

				.image {
					width: 112rpx;
					height: 112rpx;
				}


			}

			&.yy-div {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;
			}

			.tg-list {
				background: #fff;
				padding: 24rpx 0;

				border-radius: 16rpx;
				width: 150rpx;

				.image-div {
					margin: 0 auto;

					.image {
						width: 56rpx;
						height: 56rpx;
					}
				}

				.text {
					font-size: 26rpx;
					margin-top: 10rpx;
				}


			}

			.text {
				text-align: center;
				// width: 130rpx;
				color: #666666;
				margin: 0 auto;
				// line-height: 2;
				font-size: 28rpx;
			}
		}

	}

	.jrjg-div {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.jrjg-list {
			width: 290rpx;
			background: #fff;
			box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(0, 0, 0, 0.07);
			border-radius: 16rpx;
			overflow: hidden;
			font-size: 28rpx;
			margin-bottom: 30rpx;

			.image {
				width: 290rpx;
				height: 170rpx;
			}



			.title1 {
				padding: 0 16rpx;
				color: #999999;
				margin-top: 24rpx;
			}

			.title2 {
				padding: 0 16rpx;
				margin: 8rpx 0 16rpx;
				// color: #999999;
			}

			.title3 {
				padding: 0 16rpx;
				color: #999999;
				margin-bottom: 16rpx;
			}

			.redzi {
				color: #DF686A;
			}
		}
	}

	.sm-div {

		padding: $uni-wrap-padding;
		background: #fff;
		border-radius: 20rpx;
		padding: 40rpx;

		.sm-div-bg {
			// margin: 40rpx;
			min-width: 500rpx;
			max-height: 700rpx;
			overflow-y: auto;

			.sm-list {
				margin-bottom: 20rpx;
				border-bottom: 1px solid #f5f5f5;
				display: flex;
				align-items: center;
				height: 80rpx;
				display: flex;
				justify-content: space-between;

				.huangzi {
					font-size: 24rpx;
					color: #666666;
					padding-left: 10rpx;
				}
			}
		}
	}

	.pp-div {

		padding: $uni-wrap-padding;

		background: linear-gradient(180deg, #FFF2F2 0%, #FFFFFF 100%);
		border-radius: 16rpx;
		padding: 30rpx;

		.pp-div-bg {
			min-width: 500rpx;
			// max-height: 700rpx;
			overflow-y: auto;
			width: 540rpx;
			text-align: center;

			.title {
				font-size: 34rpx;
				color: #333333;
				font-weight: bold;

			}

			.bqwenzi {
				font-size: 34rpx;
				font-weight: bold;
				color: #DF686A;
				line-height: 40rpx;
				margin: 40rpx 0;
			}

			.huizi {

				color: #999999;
				font-size: 28rpx;
				text-align: center;
				margin-bottom: 16rpx;
			}

			.dianhua {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #333333;
				font-weight: bold;
				font-size: 34rpx;
				margin-bottom: 64rpx;

				.dianhuaquan {
					width: 48rpx;
					height: 48rpx;
					margin-left: 24rpx;
				}


			}

			.btn-div {
				display: flex;
				justify-content: center;
			}

			.btncss {
				background: linear-gradient(135deg, #DF686A 0%, #EE8D56 100%);
				box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(223, 104, 106, 0.25);
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				width: 330rpx;
				height: 80rpx;
				letter-spacing: 10rpx;
			}

			.lvzi {
				color: #029B00;
				font-size: 34rpx;
				margin: 40rpx 0;
			}

			.ewm {
				width: 320rpx;
				height: 320rpx;
				background: rgba(223, 104, 106, 0.1);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				padding: 20rpx;

				.image {
					width: 280rpx;
					height: 280rpx;
				}
			}

			.juzhong {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 42rpx;
				margin-bottom: 16rpx;
			}
		}
	}
</style>